<template>
    <div class="StartBuyOrder">
        <div class="container user">
            <div class="f-row f-j-between f-a-center">
                <div class="f-row f-j-between f-a-center"><img src="../../assets/logo.png" alt=""><strong>Angele</strong></div>
                <span>2019-09-06 12:24:34</span>
            </div>
            <div class="f-row f-j-between f-a-center">
                <span>出售单号 20190906898989</span>
                <div class="payTypes">
                    <gy-icon fontName="icon-zhifubao" style="color: #02A9F0;margin-right: 0.2rem;"></gy-icon>
                    <gy-icon fontName="icon-weixin1" style="color: #52BD33;margin-right: 0.2rem;"></gy-icon>
                    <gy-icon fontName="icon-yinhangqia" style="color:#118CE8;margin-right: 0.2rem;"></gy-icon>
                </div>
            </div>
        </div>
        <div class="container info f-row f-j-between f-a-center">
            <div class="f-column f-j-around f-a-center"><p><strong class="DIN-Medium">13.2</strong><span>元/ADS</span></p><p><span>当前价格</span></p></div>
            <div class="amount f-column f-j-around f-a-center">
                <p><strong class="DIN-Medium">2000</strong><span>剩余数量</span></p>
                <p><strong class="DIN-Medium">2000</strong><span>订单数量</span></p>
            </div>
        </div>
        <div class="container">
            <input type="text" placeholder="输入购买数量" v-model="amount">
        </div>
        <div class="f-row f-j-center f-a-center" style="padding: 0.3rem">
            <strong style="color: #582600;font-size: 0.3rem;">选择支付方式</strong>
        </div>
        <div class="f-row f-j-between f-a-center payTypes">
            <div v-for="(item, index) in payTypes" :key="index" @click="payTypeSelect(index)" :class="{'active-black btn': true, 'active': item.active}">{{item.title}}</div>
        </div>
        <div class="bottom f-column f-j-start f-a-center">
            <div class="protocol-row"><gy-check-box v-model="protocolSure"></gy-check-box>我已阅读 <span class="protocol">《市场购买协议》</span>并知悉协议内容</div>
            <div v-if="amount" class="submitButton" @click="buy">立即购买</div>
            <div v-else class="unSubmit">立即购买</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {NAV_BAR_INFO} from "@/store/MutationTypes";
import GyIcon from "@/components/GyIcon.vue";
import GyCheckBox from "@/components/GyCheckBox.vue";
@Component({
    name: 'StartBuyOrder',
    components: {GyCheckBox, GyIcon}
})
export default class extends Vue {
    private protocolSure: boolean = true;
    private amount: number | null = null;
    private payTypes: any[] = [
        {title: '微信', active: true},
        {title: '支付宝', active: false},
        {title: '银行卡', active: false}
    ];
    private mounted(): void {
        let __this = this;
        this.$common.scrollToTop();
        this.$store.dispatch(NAV_BAR_INFO, {
            leftItem: {name: 'C2C', click: () => {
                    __this.$router.push('/c2c')
                }}
        })
    }
    private payTypeSelect(index: number): void {
        for (let i = 0; i < this.payTypes.length; i++) {
            if (this.payTypes[i].active) {
                this.payTypes[i].active = false;
            }
            if (i === index) {
                this.payTypes[i].active = true;
            }
        }
    }
    private buy(): void {
        this.$router.push('/start-buy-order-check')
    }
}
</script>

<style scoped lang="less">
.StartBuyOrder {
    padding: 0.2rem 0.3rem 1.8rem 0.3rem;
    & .user {
        padding: 0 0.5rem !important;
        & .f-row {
            padding: 0.2rem 0;
        }
        & img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 0.8rem;
            margin-right: 0.2rem;
        }
        & strong {
            color: #000000;
            font-size: 0.3rem;
        }
        & span {
           color: #333333;
            font-size: 0.24rem;
        }
    }
    & .info {
        height: 2.28rem;
        padding: 0 0.5rem !important;
        & .f-column {
            height: 1.5rem;
        }
        & strong {
            color: black;
            font-size: 0.44rem;
        }
        & span {
            font-size: 0.24rem;
        }
        & .amount {
            & strong {
                color: #666666;
                margin-right: 0.1rem;
            }
            & span {
                color: #666666;
                font-size: 0.24rem;
            }
        }
    }
    & .container {
        background-color: white;
        border-radius: 0.1rem;
        padding: 0.3rem 0.2rem;
        margin-bottom: 0.2rem;
        color: #666666;
        & input {
            padding: 0.3rem;
            width: 6.3rem;
            border: none;
            text-align: center;
            background-color: #FAFAF7;
            border-radius: 0.1rem;
        }
    }
    & .payTypes {
        & .btn {
            width: 2.06rem;
            height: 0.96rem;
            border-radius: 0.1rem;
            background-color: white;
            color: #582600;
            text-align: center;
            line-height: 0.96rem;
            font-size: 0.3rem;
            border: 0.02rem solid #ffffff;
        }
        & .active {
            color: #3B83FF;
            border: 0.02rem solid #3B83FF;
        }
    }
    & .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2.42rem;
        background-color: white;
        z-index: 2;
        &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            background-image: linear-gradient(
                    0deg,
                    transparent 61%,
                    rgba(0, 0, 0, 0.3) 100%
            );
        }

        & .protocol-row {
            height: 0.4rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 0.24rem;
            margin: 0.2rem 0;
            color: #333333;
            & .protocol {
                color: #3B83FF;
                padding: 0 0.1rem;
            }
        }
    }
}
</style>
